<!--  -->
<template>
<div id='MerchantList'>
        <div class="hint">
        <hint></hint>
    </div>
    <div class="merchant-list">
        <div class="content">
                    <div class="merchant-head">
            <div class="top">商户筛选</div>
            <div class="bottom">
                商户名称：<input type="text" placeholder="请输入商户名称" v-model="inputVal">
<el-button type="primary" icon="el-icon-search" @click="serchMerchant">查询</el-button>
            </div>
        </div>
        <div class="merchant-center"></div>
    <div class="center-top">
        <span >共有{{tableData.length}}条记录</span>
        <button><i class="el-icon-upload2"></i> 导出数据</button>
    </div>
    <div class="mid" >
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100% height:300px;overflow-y: scroll"
   >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
    prop="registe_time"
      label="注册时间"
      width="200">
      <!-- <template slot-scope="scope" >{{ scope.row.date }}
      </template> -->
    </el-table-column>
    <el-table-column
      prop="username"
      label="商户名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="city"
      label="地址"
      width='230'
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="id"
      label="id"
      width="230">
    </el-table-column>
    <el-table-column
      prop="user_id"
      label="用户id"
      width="220">
    </el-table-column>
    <el-table-column
      label="操作"
      width="250">
          <template slot-scope="scope" width='100'>
               <el-link icon="el-icon-edit" type="primary">编辑</el-link>  
               &nbsp;
  <el-link type="danger"  @click.native.prevent="deleteRow(scope.$index, tableData)">注销</el-link>
      </template>
   <!-- <el-link type="danger"  @click.native.prevent="deleteRow(scope.$index, tableData)">注销</el-link> -->
    </el-table-column>

  </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 15, 20,]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>

    </div>
    
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from"./header"
import { getUserList, getTotalUser } from "@/api";

export default {
//import引入的组件需要注入到对象中才能使用
components: {
            'hint':hint

},
data() {
//这里存放数据
return {
  tableData: [], // 表格中数据
      pageSize: 5, // 每页五条数据 limit
      currentPage: 1, 
            total: 0,

        inputVal:'',
      checkAll: false,
        isIndeterminate: true,
        //   tableData: [
        //       {
        //   date: '1',
        //   name: '肯德基餐饮服务有限公司',
        //   address: '北京东城区',
        //   lxr:'马云',
        //   phone:'13000266589',

        // }, 
        //               {
        //   date: '2',
        //   name: '肯德基餐饮服务有限公司',
        //   address: '北京东城区',
        //   lxr:'马云',
        //   phone:'13000266589',

        // }, 
        //               {
        //   date: '3',
        //   name: '肯德基餐饮服务有限公司',
        //   address: '北京东城区',
        //   lxr:'马云',
        //   phone:'13000266589',

        // }, 

        // ],


    merchantlist:[
        {
            id:1,
            name:'',
            position:'',
            call:'张嘻嘻',
            phone:'13322564494',
        },


    ]
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
      handleSizeChange: function (value) {
      // 每页条数发生变化时候 重新发请求拿数据
      this.pageSize = value;
      //   console.log("handleSizeChange", +":", value);
      this.getUserListTableData();
    },
    handleCurrentChange: function (value) {
      // value 当前页码
      //   console.log("handleCurrentChange", +":", value);
      // console.log(value);
      this.currentPage = value;
      this.getUserListTableData();
    },
    // 获取用户表格数据
    async getUserListTableData() {
      let res1 = await getTotalUser();
      let res = await getUserList({
        limit: this.pageSize,
        offset: (this.currentPage - 1) * this.pageSize,
      });
      // console.log(res);
      this.tableData = res;
      this.total = res1.count;
    },

       deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
    serchMerchant:function(){
        // console.log(this.merchantlist);
        // console.log(this.inputVal);
  this.inputVal=''
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getUserListTableData();

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
.merchant-list{
        background: #f5f5f5;

}
.content{
    width: 1388px;
    background: #fff;
    margin: 0 auto;
    height: 950px;
}
.merchant-head{
    width: 1388px;
    height: 116px;
    border: 1px solid #E9E9E9;
}
.top{
    border-bottom: 1px solid #E9E9E9;
    height: 55px;
    line-height: 55px;
    text-indent: 20px;
    color: #666666;
    font-weight: bold;
    font-size: 18px;
}
.bottom{
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 55px;
    text-indent: 60px;
    text-indent: 90px;
    font-size: 16px;
}
.bottom input{
    width: 320px;
    height: 30px;
    border: 1px solid #D8D8D8;
    text-indent: 10px;
}
.bottom button{
    width: 80px;
    height: 35px;
    background-color: #0079FE;
    border: none;
    color: white;
    border-radius: 5px;
}
.center-top{
    height: 52px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-indent: 20px;
    padding: 5px;
    color: #666666;
    font-weight: bold;
}
.center-top button{
    width: 100px;
    height: 35px;
    background: #fff;
    border: 1px solid #D8D8D8;
    color: #AA9E9E;
}
.a{
    float: right;
}
</style>